<template>
  <div id="ServiceDetail">
    <div class="banner container-fuild text-center">发布舱位</div>
    <div class="main">
      <div class="foot">
        <el-form class="foot-content"
                 ref="form"
                 :rules="rules"
                 :model="form"
                 label-width="120px">
          <div class="table-title"
               style="margin-bottom:20px">
            <span class="title-text">舱位信息</span>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="舱位名："
                            prop="product_name">
                <el-input v-model="form.product_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="运输号："
                            prop="trans_name">
                <el-input v-model="form.trans_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="运输方式："
                            prop="product_type">
                <el-select v-model="form.product_type">
                  <el-option label="海运"
                             value="sea"></el-option>
                  <el-option label="陆运"
                             value="line"></el-option>
                  <el-option label="空运"
                             value="air"></el-option>
                  <el-option label="铁路"
                             value="railway"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="截止时间："
                            prop="end_time">
                <el-date-picker v-model="form.end_time"
                                type="datetime"
                                placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划出发时间："
                            prop="etd_time">
                <el-date-picker v-model="form.etd_time"
                                type="datetime"
                                placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划到达时间："
                            prop="eta_time">
                <el-date-picker v-model="form.eta_time"
                                type="datetime"
                                placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="8">
              <el-form-item label="小拼箱："
                            prop="service_type">
                <el-switch v-model="form.service_type"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="箱子类型："
                            prop="box_type">
                <el-select v-model="form.box_type">
                  <el-option label="干货箱"
                             value="干货箱"></el-option>
                  <el-option label="干货高箱"
                             value="干货高箱"></el-option>
                  <el-option label="挂衣箱"
                             value="挂衣箱"></el-option>
                  <el-option label="开顶箱"
                             value="开顶箱"></el-option>
                  <el-option label="冷冻箱"
                             value="冷冻箱"></el-option>
                  <el-option label="冷高箱"
                             value="冷高箱"></el-option>
                  <el-option label="油罐箱"
                             value="油罐箱"></el-option>
                  <el-option label="框架箱"
                             value="框架箱"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="箱子尺寸："
                            prop="box_length">
                <el-select v-model="form.box_length">
                  <el-option label="20英尺"
                             value="20"></el-option>
                  <el-option label="35英尺"
                             value="35"></el-option>
                  <el-option label="40英尺"
                             value="40"></el-option>
                  <el-option label="45英尺"
                             value="45"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="出发地名："
                            prop="start_point_name">
                <el-input v-model="form.start_point_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出发地编码："
                            prop="start_point">
                <el-input v-model="form.start_point"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目的地名："
                            prop="end_point_name">
                <el-input v-model="form.end_point_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目的地编码："
                            prop="end_point">
                <el-input v-model="form.end_point"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="8">
              <el-form-item label="荷载(KGS)："
                            prop="box_payload">
                <el-input-number v-model="form.box_payload"
                                 :step="1000"
                                 size="small"
                                 :min="1000"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="容积(CBM)："
                            prop="box_volume">
                <el-input-number v-model="form.box_volume"
                                 :step="1"
                                 size="small"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="价格(CNY)："
                            prop="product_price">
                <el-input-number v-model="form.product_price"
                                 :step="1"
                                 size="small"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支付条款："
                            prop="product_paytype">
                <el-select v-model="form.product_paytype">
                  <el-option label="预付"
                             value="预付"></el-option>
                  <el-option label="第三方支付"
                             value="第三方支付"></el-option>
                  <el-option label="到付"
                             value="到付"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </div>

          <div style="display:flex;justify-content: space-between">
            <el-col :span="15">
              <el-form-item label="舱位要求：">
                <el-input type="textarea"
                          v-model="form.product_remark"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <!-- 代运商信息 -->
          <div class="table-title"
               style="margin-bottom:20px">
            <span class="title-text">代运商信息</span>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="代运商："
                            prop="company_name">
                <el-input v-model="form.company_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="代运商代码："
                            prop="company_code">
                <el-input v-model="form.company_code"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="财务人：">
                <el-input v-model="form.company_finance_user"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="业务电话：">
                <el-input v-model="form.company_finance_iphone"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="传真：">
                <el-input v-model="form.company_fax"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="企业邮箱：">
                <el-input v-model="form.company_email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业地址：">
                <el-input v-model="form.company_address"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <!-- 承运商信息    -->
          <div class="table-title"
               style="margin-bottom:20px">
            <span class="title-text">承运商信息</span>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="承运商："
                            prop="carrier_name">
                <el-input v-model="form.carrier_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="承运商代码："
                            prop="carrier_code">
                <el-input v-model="form.carrier_code"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="财务人：">
                <el-input v-model="form.carrier_finance_user"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="业务电话：">
                <el-input v-model="form.carrier_finance_iphone"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="传真：">
                <el-input v-model="form.carrier_fax"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="企业邮箱：">
                <el-input v-model="form.carrier_email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业地址：">
                <el-input v-model="form.carrier_address"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <el-form-item style="display:flex;justify-content: space-between;">
            <el-button type="primary"
                       @click="submitForm('form')">立即创建</el-button>
            <el-button style="margin-left:50px">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
import bus from '@/utils/bus';
export default {
  // props:{
  //     row:{
  //         type:String,
  //         default:''
  //     }
  // },
  name: "sendproduct",
  data () {
    return {
      form: {
        users_id: this.$store.getters.userinfo.users_id,
        product_name: '',
        trans_name: '',
        product_type: '',
        end_time: '',
        etd_time: '',
        eta_time: '',
        start_point_name: '',
        start_point: '',
        end_point_name: '',
        end_point: '',
        service_type: 'false',
        box_type: '',
        box_length: '',
        box_payload: '',
        box_volume: '',
        product_price: '',
        product_paytype: '',
        product_remark: '',
        company_name: this.$store.getters.userinfo.company_name,
        company_code: this.$store.getters.userinfo.company_code,
        company_finance_user: this.$store.getters.userinfo.company_finance_user,
        company_finance_iphone: this.$store.getters.userinfo.company_finance_iphone,
        // company_fax: this.$store.getters.userinfo.company_fax,
        company_email: this.$store.getters.userinfo.company_email,
        company_address: this.$store.getters.userinfo.company_address,
        carrier_name: '',
        carrier_code: '',
        carrier_finance_user: '',
        carrier_finance_iphone: '',
        carrier_fax: '',
        carrier_email: '',
        carrier_address: '',
        start_time: '',
        publish_time: '',
        box_type_code: '',
        box_code: '',
      },
      rules: {
        service_type: [
          { required: true, message: '请选择产品类型', trigger: 'blur' },
        ],
        product_name: [
          { required: true, message: '请输入舱位名', trigger: 'blur' },
          // { min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        box_length: [
          { required: true, message: '请箱子长度', trigger: 'blur' },
          // { min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        trans_name: [
          { required: true, message: '请输入运输号', trigger: 'blur' },
        ],
        product_type: [
          { required: true, message: '请选择产品类型', trigger: 'blur' },
          // { min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        end_time: [
          { required: true, message: '请输入截止时间', trigger: 'blur' },
          // { min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        etd_time: [
          { required: true, message: '请输入计划出发时间', trigger: 'blur' },
        ],
        eta_time: [
          { required: true, message: '请输入计划达到时间', trigger: 'blur' },
          // { min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        start_point_name: [
          { required: true, message: '请输入出发地名', trigger: 'blur' },
          // { min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        // checkPassword: [
        //   { required: true, message: '请再次输入密码确认', trigger: 'blur' },
        //   { min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
        //   { validator: validatePass2, trigger: 'blur' }
        // ],
        start_point: [
          { required: true, message: '请输入出发地编号', trigger: 'blur' },
          // { max: 11, message: '手机号码有误', trigger: 'blur' }
        ],
        end_point_name: [
          { required: true, message: '请输入目的地名', trigger: 'blur' }
        ],
        end_point: [
          { required: true, message: '请输入目的地编号', trigger: 'blur' }
        ],
        box_type: [
          { required: true, message: '请选择箱子类型', trigger: 'blur' }
        ],
        box_payload: [
          { required: true, message: '请输入出发地名', trigger: 'blur' },
          // { min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        // checkPassword: [
        //   { required: true, message: '请再次输入密码确认', trigger: 'blur' },
        //   { min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
        //   { validator: validatePass2, trigger: 'blur' }
        // ],
        box_volume: [
          { required: true, message: '请输入容积信息', trigger: 'blur' },
          // { max: 11, message: '手机号码有误', trigger: 'blur' }
        ],
        product_price: [
          { required: true, message: '请输入产品单价', trigger: 'blur' }
        ],
        product_paytype: [
          { required: true, message: '请选择支付条款', trigger: 'blur' }
        ],
        box_type: [
          { required: true, message: '请选择箱子类型', trigger: 'blur' }
        ]
      }
      // ruleForm: {
      //   name: '',
      //   region: '',
      //   date1: '',
      //   date2: '',
      //   delivery: false,
      //   type: [],
      //   resource: '',
      //   desc: ''
      // },
      // rules: {
      //   name: [
      //     { required: true, message: '请输入活动名称', trigger: 'blur' },
      //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      //   ],
      //   region: [
      //     { required: true, message: '请选择活动区域', trigger: 'change' }
      //   ],
      //   date1: [
      //     { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
      //   ],
      //   date2: [
      //     { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
      //   ],
      //   type: [
      //     { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
      //   ],
      //   resource: [
      //     { required: true, message: '请选择活动资源', trigger: 'change' }
      //   ],
      //   desc: [
      //     { required: true, message: '请填写活动形式', trigger: 'blur' }
      //   ]
      // }
    };
  },
  created () {

  },
  methods: {
    submitForm (formName) {
      var newtime = new Date().getTime()
      this.form.start_time = this.form.publish_time = this.timestampToTime(newtime)
      // console.log(this.form.start_time,this.form.publish_time)
      this.form.box_code = this.form.product_name
      switch (this.form.box_type) {
        case '干货箱':
          this.form.box_type_code = this.form.box_length + 'GP'
          break;
        case '干货高箱':
          this.form.box_type_code = this.form.box_length + 'GH'
          break;
        case '挂衣箱':
          this.form.box_type_code = this.form.box_length + 'HT'
          break;
        case '开顶箱':
          this.form.box_type_code = this.form.box_length + 'OT'
          break;
        case '冷冻箱':
          this.form.box_type_code = this.form.box_length + 'RF'
          break;
        case '冷高箱':
          this.form.box_type_code = this.form.box_length + 'RH'
          break;
        case '油罐箱':
          this.form.box_type_code = this.form.box_length + 'TK'
          break;
        case '框架箱':
          this.form.box_type_code = this.form.box_length + 'FR'
          break;
        default:
          this.$message({
            type: 'warning',
            message: '请选择箱子类型!'
          });
          return
      }
      if (this.form.service_type === false) {
        this.form.service_type = '0'
      } else {
        this.form.service_type = '1'
      }
      console.log(this.form.box_code, this.form.box_type_code)
      console.log(this.form)
      // var total = (s1 - s2)/1000
      // var day = parseInt(total / (24*60*60))
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('ture')
          this.$confirm('', '确认发布', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'success',
            center: true
          }).then(() => {
            // 生成订单
            const api = '/sendproduct'
            this.$axios.post(api, this.form)
              .then(res => {
                console.log(res)
                this.$message({
                  type: 'success',
                  message: '发布成功!'
                });
              })
              .catch(err => {
                console.log(err)
                this.$message({
                  type: 'warning',
                  message: '提交失败!'
                });
              })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消发布'
            });
          });

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    timestampToTime (timestamp) {
      var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    }

  }
};
</script>

<style >
.banner {
  color: #fff;
  font-size: 30px;
  height: 190px;
  line-height: 190px;
  background-image: url("../../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.main {
  width: 60%;
  margin: 20px auto;
}
.table-title {
  border-bottom: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 34px;
}
.title-text {
  color: #000;
  font-size: 16px;
  padding-top: 4px;
  font-weight: 700;
  border-bottom: 2px solid #07467c;
}
</style>
